<script lang="ts" setup>
import { ref } from "vue";
import {getProjectByNo} from "/@/api/main/projectQa";
import {ElMessage} from "element-plus";

// 表单数据
const warehouse = ref({
  length: undefined as number | undefined,
  width: undefined as number | undefined,
});

const goodsSize = ref({
  length: undefined as number | undefined,
  width: undefined as number | undefined,
});

const throughput = ref({
  perHour: undefined as number | undefined,
});

// 弹窗显隐控制
const isShowDialog = ref(false);

// 打开弹窗方法
const  openDialog =  async (row:any) => {
  console.log(row)
  if (row && row.id){
    try{
      const projectDetail = await  getProjectByNo({ projectNo: row.id })
      console.log('projectDetail', projectDetail);
      const inputStr = projectDetail.data.result[projectDetail.data.result.length - 1].inputValues;
      const params = Object.fromEntries(
          inputStr.split(',').map(pair => pair.split('=').map(decodeURIComponent))
      );
      const {
        warehouseWidth,
        warehouseLength,
        goodsWidth,
        expectedThroughput
      } = params;
      warehouse.value.width  = warehouseWidth;
      warehouse.value.length = warehouseLength;
      goodsSize.value.width  = goodsWidth;
      goodsSize.value.length = goodsWidth;
      throughput.value.perHour = expectedThroughput;
    } catch (error) {
      ElMessage.error('获取问卷详情失败，请稍后重试');
      console.error('getProjectByNo error:', error);
      return; // 或根据上下文选择合适的退出方式
    }
  }
  isShowDialog.value = true;
}

// 关闭弹窗方法
function closeDialog() {
  const parentWindow = window.opener as Window | null;
  if (parentWindow && !parentWindow.closed) {
    parentWindow.location.reload(); // 刷新父窗口
    console.log('cc1');
  }
  console.log('cc');

  // 可选：清空表单或重置数据
  warehouse.value = {
    length: undefined,
    width: undefined,
  };
  goodsSize.value = {
    length: undefined,
    width: undefined,
  };
  throughput.value = {
    perHour: undefined,
  };


}

// 对外暴露方法给父组件调用
defineExpose({
  openDialog,
  closeDialog
});
</script>

<template>
  <el-dialog v-model="isShowDialog" title="Questionnaire" width="80%" @close="closeDialog">
    <div class="projectQa-container" style="height:auto">
      <p style="text-align: center;font-size: 24pt;font-weight:bold">Questionnaire</p>
      <p>&nbsp;</p>

      <!-- 仓库尺寸 -->
      <el-card>
        <template #header>
          <div class="card-header">
            <span style="font-weight: bold">Warehouse</span>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="grid-content">
              <span class="label">Length</span>
              <el-input class="custom-input" v-model="warehouse.length" placeholder="Please input" style="width: 100px"></el-input>
              <span class="unit">M</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <span class="label">Width</span>
              <el-input class="custom-input" v-model="warehouse.width" placeholder="Please input" style="width: 100px"></el-input>
              <span class="unit">M</span>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 货物尺寸 -->
      <el-card style="margin-top: 20px">
        <template #header>
          <div class="card-header">
            <span style="font-weight: bold">Item</span>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="grid-content">
              <span class="label">Length</span>
              <el-select v-model="goodsSize.length" style="width: 100px;">
                <el-option label="55" :value="55" />
                <el-option label="65" :value="65" />
              </el-select>
              <span class="unit">CM</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <span class="label">Width</span>
              <el-select v-model="goodsSize.width" style="width: 100px;">
                <el-option label="55" :value="55" />
                <el-option label="65" :value="65" />
              </el-select>
              <span class="unit">CM</span>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 期望吞吐量 -->
      <el-card style="margin-top: 20px">
        <template #header>
          <div class="card-header">
            <span style="font-weight: bold">Productivity</span>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="grid-content">
              <span class="label">Hourly</span>
              <el-input class="custom-input" v-model="throughput.perHour" placeholder="Please input" style="width: 100px"></el-input>
              <span class="unit">Piece</span>
            </div>
          </el-col>
        </el-row>
      </el-card>

    </div>
  </el-dialog>
</template>

<style scoped>
.projectQa-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.grid-content {
  display: flex;
  align-items: center;
}

.label {
  margin-right: 10px;
  font-weight: bold;
}

.unit {
  margin-left: 5px;
  font-weight: bold;
}

.custom-input ::v-deep(.el-input__inner) {
  text-align: center;
  border: none;
  outline: none;
  background-color: transparent;
}

.button-section {
  text-align: right;
  margin-top: 20px;
}
</style>
